<template>
<div class="all">
  <van-nav-bar
  title="我的收藏"
  left-arrow
  @click-left="$router.back()"
/>
<ul>
      <li v-for="(item,index) in list" :key="index" @click='$router.push(`/message/${item.houseCode}`)'>
        <img :src="`http://www.xiaoshuaipeng.com:8080${item.houseImg}`" alt="">
        <div class="right">
          <h3 class="one">{{item.title}}</h3>
          <p class="two">{{item.desc}}</p>
          <p class="three">{{item.tags[0]}}</p>
          <p class="four">{{item.price}}元/月</p>
        </div>
      </li>
</ul>
</div>
</template>

<script>
import{getcollect} from '@/api/user'
export default {
    name:'CL',
 data () {
 return {
    list:''
   }
 },
created(){
  this.getcollect()
},
 components: {},

 methods: {
  async getcollect(){
    const res=await getcollect()
    this.list=res.data.body
    console.log(res);
  }
 }
}
</script>

<style scoped lang='less'>
.all ul{
  max-width: 100%;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background-color: white;
}
.all ul li{
  display: flex;
  border: 0px solid black;
  margin: 10px 0;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0;
  max-width: 100%;
}
.all ul li img{
  width: 120px;
  height: 80px;
  margin-right: 20px;
}
.one{
  font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}
.two{
  white-space: nowrap;
    vertical-align: middle;
    font-size: 12px;
    color: '#afb2b3';
}
.three{
      color: #39becd;
    background: #e1f5f8;
    font-size: 12px;
    border-radius: 3px;
    padding: 4px 5px;
    margin-right: 5px;
    line-height: 12px;
    width: 50px;
}
.four{
  font-size: 12px;
    color: #fa5741
}
</style>